<template>
  <div class="home">
    <h1>
      <img src="@/assets/imgs/logo.png" alt="" />
    </h1>

    <div class="content_cover">
      <div class="leftnav" v-if="menuList.length > 0">
        <el-menu
          router
          unique-opened
          :default-active="$store.getters.activeRouter"
          class="el-menu-vertical-demo"
          @open="handleOpen"
          @close="handleClose"
          :collapse="isCollapse"
        >
          <el-submenu
            :index="item.id + ''"
            v-for="item in menuList"
            :key="item.id"
          >
            <template slot="title">
              <i :class="item.icon"></i>
              <span slot="title">{{ item.label }}</span>
            </template>
            <el-menu-item-group v-if="item.children.length > 0">
              <el-menu-item
                :index="item1.path"
                v-for="item1 in item.children"
                :key="item1.id"
              >
                <i :class="item1.icon"></i>
                {{ item1.label }}</el-menu-item
              >
            </el-menu-item-group>
          </el-submenu>
        </el-menu>
      </div>

      <div class="rightcon">
        <div class="headernav">
          <div class="leftnav1">
            <i class="el-icon-s-fold" @click="ChangeZk"></i>
            <breadcrumb />
          </div>
          <div class="p1">
            <!-- 将 :src 属性直接改为v-lazy, :key是为了防止刷新页面或图片更改时图片不更新 -->
            <img
              v-lazy="
                `${$store.state.baseurl}${$store.state.userdata.headerUrl}`
              "
              :key="`${$store.state.baseurl}${$store.state.userdata.headerUrl}`"
              alt=""
              @mouseenter="isShowImg = false"
            />
            <div
              @click="handleUpload"
              @mouseleave="isShowImg = true"
              v-show="!isShowImg"
              class="bck"
            >
              上传
              <br />
              头像
            </div>

                <input
              type="file"
              ref="uploadheaderimg"
              name="headerurl"
              @change="updataUserHeader"
            />

            <span> {{ this.$store.state.userdata.username }}({{ role }}) </span>

            <span class="out" @click="outLogin">退出</span>
          </div>
        </div>

        <div class="wrapper">
          <navHeader />
          <div class="content">
           
            <router-view></router-view>
          </div>
        </div>
      </div>
    </div>
    <el-dialog title="提示" top="10%" :visible.sync="dialogVisible" width="30%">
      <span>确定退出登陆吗？</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose1(0)">取 消</el-button>
        <el-button type="primary" @click="handleClose1(1)">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 
    <div class="monfang">
      <div class="cube">
        <div class="front">
          <a href="javascript:;">坚持</a>
        </div>
        <div class="back">
          <a href="javascript:;">加油</a>
        </div>
        <div class="right">
          <a href="javascript:;">努力</a>
        </div>
        <div class="left">
          <a href="javascript:;">胜利</a>
        </div>
        <div class="top">
          <a href="javascript:;">团结</a>
        </div>
        <div class="bottom">
          <a href="javascript:;">加油</a>
        </div>
      </div>
    </div> -->
  </div>
</template>

<script>
import { getStructure, updataUserHeader } from "@/api/data";
import { HandleMenulist, handleTitle } from "../../tool";
import navHeader from "../../components/common/navHeader";
import breadcrumb from "../../components/common/breadcrumb";

export default {
  data() {
    return {
      isCollapse: true,
      dialogVisible: false,
      activeRouter: "",
      menuList: [],
      isShowImg: true,
    };
  },
  async mounted() {
    // 将爱心动画移除
    if (document.getElementById("canvas_bck") !== null) {
      document.getElementById("canvas_bck").remove();
    }

    //  console.log(this.$route.path);
    // 将后端返回的路由结构转化为menulist的格式;
    let routerList = JSON.parse(sessionStorage.getItem("routerlist"));
    let obj = HandleMenulist(routerList);

    this.menuList = obj;
    this.activeRouter = this.$route.fullPath;
    let data = await getStructure();
    if (data.data.length > 0) {
      //将结构保存
      sessionStorage.setItem(
        "structure",
        JSON.stringify(data.data[0].institutionalStructure)
      );
    }
  },
  computed: {
    role() {
      if (this.$store.state.userdata.shengfen == 0) {
        return "学生";
      } else if (this.$store.state.userdata.shengfen == 1) {
        return "老师";
      } else if (this.$store.state.userdata.shengfen == 2) {
        return "管理员";
      }
    },
    // isCollapse() {
    //   if (this.$store.state.browseList.length > 10) {
    //     return true;
    //   } else {
    //     return false;
    //   }
    // },
  },

  watch: {
    $route() {
      // console.log(typeof(this.$route));
      let obj = {
        title: this.$route.meta.title,
        path: this.$route.path,
      };
      if (this.$route.path !== "/login") {
        this.$store.commit("setCurrent", obj);
        this.activeRouter = this.$store.state.current.path;
      }

      // 获取当前路由的信息传递给面包削组件
      handleTitle(this.$route.path);

      this.$store.commit("settitleObj", handleTitle(this.$route.path));
    },
  },

  components: {
    navHeader,
    breadcrumb,
  },
  methods: {
    // 点击触发选择上传头像
    handleUpload() {
      this.$refs.uploadheaderimg.click();
    },
    // 提交头像修改
    async updataUserHeader(e) {
      var file = e.target.files[0];

      var param = new FormData();
      param.append("_id", this.$store.state.userdata._id);
      param.append(this.$refs.uploadheaderimg.name, file, file.name);
      // console.log(this.$refs.uploadheaderimg.name,  file.name)
      // console.log(this.$refs.uploadheaderimg.name,,file.name)
      // for (var value of param.values()) {
      //   console.log(value);
      // }
      let data = await updataUserHeader(param);
      // console.log(data)
      if (data.code == 200) {
        this.$message.success(data.msg);
        this.$store.commit("setuserdata", data.data);
      }
    },
    handleClose1(num) {
      if (num == 1) {
        sessionStorage.clear();
        this.$router.replace("/login");
        window.location.reload();
      }
      this.dialogVisible = false;
    },
    // 退出登陆
    outLogin() {
      this.dialogVisible = true;
      this.$store.commit("delallbrowseList");
    },

    // 切换左侧nvl的展开和关闭
    ChangeZk() {
      this.isCollapse = !this.isCollapse;
      this.$store.commit("setisCollapse", this.isCollapse);
    },

    handleOpen(key, keyPath) {
      // console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      // console.log(key, keyPath);
    },
  },
};
</script>

<style lang="scss" scoped>
/*星座特效*/
#display {
  z-index: 0;
  display: block;
  cursor: default;
  position: absolute;
}
#blachole {
  position: fixed;
  top: 60px;
  right: 60px;
  width: 120px;
  height: 120px;
}
canvas {
  width: 100%;
  height: 100%;
}

/*第一屏*/
// header {
//   position: relative;
//   color: white;
//   height: 100%;
//   min-height: 600px;
// }



.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}
h1 {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  width: 100%;
  font-size: 24px;
  height: 60px;
  line-height: 60px;
  padding-left: 64px;
  // text-align: center;
  background-image: linear-gradient(120deg, #e0c3fc 0%, #8ec5fc 100%);
  background: #c9ccd3;
  background-image: linear-gradient(
    -180deg,
    rgba(255, 255, 255, 0.5) 0%,
    rgba(0, 0, 0, 0.5) 100%
  );
  background-blend-mode: lighten;

  display: flex;
  justify-content: flex-start;
  align-items: center;
  img {
    height: 100%;
  }
}
.content_cover {
  display: flex;
  max-width: 100vw;
}
.home {
  max-width: 100%;
  padding-top: 60px;
}

.rightcon {
  // width: calc(100vw - 200px);
  max-width: calc(100vw - 73px);
  flex: 1;
  width: 100%;
  min-height: calc(100vh - 60px);

  .headernav {
    padding: 0 20px;
    height: 60px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #fff;
    i.el-icon-s-fold {
      font-size: 30px;
      color: #555;
      cursor: pointer;
    }

    .p1 {
      cursor: pointer;
      height: 100%;
      display: flex;
      align-items: center;
      position: relative;
      .bck {
        position: absolute;
        width: 45px;
        height: 45px;
        text-align: center;
        font-size: 12px;
        color: #ccc;
        padding-top: 3px;
        border-radius: 50%;
        background-color: rgba(0, 0, 0, 0.65);
        z-index: 990;
        border: 2px solid #fff;
      }
      img {
        width: 45px;
        height: 45px;
        border-radius: 50%;
      }

      input {
        position: absolute;
        width: 45px;
        height: 45px;
        border-radius: 50%;
        z-index: -1;
      }

      span {
        font-size: 14px;
        color: #999;
        margin-left: 10px;
      }
      .out {
        &:hover {
          color: #369;
        }
      }
    }
  }
}

.wrapper {
  max-width: 100%;

  background-color: #f6f7f9;
}

.content {
  overflow-y: auto;
  height: calc(100vh - 168px);
}
.content::-webkit-scrollbar {
  display: none;
}

/* 大盒子 */
.monfang {
  width: 60px;
  height: 60px;
  margin: 0 auto;
  position: fixed;
  z-index: 999;
  perspective: 1000px;
  bottom: 0;
  right: 0;
  /* 居中 */
  transform: translate(-80%, -80%);
}
.cube {
  width: 100%;
  height: 100%;
  position: absolute;
  /* 转换3D */
  transform-style: preserve-3d;
  transform: rotateX(-15deg) rotateY(-20deg) translateZ(-100px);
  /* 设置中心点 */
  transform-origin: center center -100px;
  animation: around 5s cubic-bezier(0.94, -0.6, 0.45, 1.31) infinite;
}
.cube div {
  width: 80px;
  height: 80px;
  display: block;
  margin: 0;
  position: absolute;
}
.cube div a {
  color: #fff;
  text-decoration: none;
  text-align: center;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  line-height: normal;
  font-size: 16px;
  letter-spacing: 3px;
}
.cube .front {
  transform: rotateX(0) translateZ(40px);
  background-color: rgba(0, 191, 255, 0.7);
}
.cube .back {
  transform: rotateY(180deg) translateZ(40px);
  background-color: rgba(124, 252, 0, 0.7);
}
.cube .left {
  transform: rotateY(-90deg) translateZ(40px);
  background-color: rgba(255, 215, 0, 0.7);
}
.cube .right {
  transform: rotateY(90deg) translateZ(40px);
  background-color: rgba(0255, 69, 0, 0.7);
}
.cube .top {
  transform: rotateX(90deg) translateZ(40px);
  background-color: rgba(255, 0, 157, 0.7);
}
.cube .bottom {
  transform: rotateX(-90deg) translateZ(40px);
  background-color: rgba(184, 111, 220, 0.7);
}

@keyframes around {
  100% {
    transform: rotateX(-15deg) rotateY(-380deg) translateZ(-100px);
  }
}
.leftnav1 {
  display: flex;
  align-items: center;
  i {
    margin-right: 20px;
  }
}
</style>